<script setup>
import {router} from "@/plugins/1.router/index.js";
import {getSessionList} from "@/api/common.js";
import CustomTabs from "@/components/customTabs.vue";
import {ref} from "vue";
import {distributionIndex, standardRadar} from "@/api/studentGrades.js";
import {useApi} from "@/composables/useApi.js";
import standarGradeHeader from '@/pages/platform/components/standarGradeHeader.vue'
import {rankingTrends, studentStandardDetail, studentStandardPie, studentStandardRadar} from "@/api/standard.js";

const route = useRoute()
const studentInfo = ref({})
const standardGrades = ref({})
const goBack = () => {
  router.go(-1)
}
const standardForm = ref({
  examcourse_id: null
})
const sessionList = ref([])
getSessionList(1).then(data => {
  sessionList.value = data
  standardForm.value.examcourse_id = data[0].examcourse_id
  getStudentDetail()
  getStandardRadar()
  getStandardPie()
})
const changeSession = () => {
  getStudentDetail()
  getStandardRadar()
  getStandardPie()
}
/** 获取学生成绩详情*/
const studentDetail = ref({})
const getStudentDetail = () =>{
  studentStandardDetail({
    student_id: route.query.id,
    examcourse_id:standardForm.value.examcourse_id
  }).then(res=>{
    studentDetail.value = res.data
  })
}

const classGradesTipsList = [
  {title: '总分', color: '#c8afff'},
  {title: '英语', color: '#6ecefe'},
  {title: '数学', color: '#9edb71'},
  {title: '语文', color: '#fed060'},
]

const testTypeList = [
  {title: '期末', type: 1},
  {title: '期中', type: 2},
]
const testType = ref('期末')
const testTypeChange = () => {
  getLineData()
}


/** 获取标化饼图开始*/
const standardPieList = ref([])
const getStandardPie = () => {
  studentStandardPie({...standardForm.value,student_id:route.query.id, type: subject.value}).then(res => {
    console.log(res.data)
    standardPieList.value = res.data
  })
}
/** 获取标化饼图结束*/

  // 科目列表
const subjectList = ref([
    {
      type: 1,
      title: '总分',
    }, {
      type: 2,
      title: '语文',
    }, {
      type: 3,
      title: '数学',
    }, {
      type: 4,
      title: '英语',
    }
  ])
const subject = ref(1)
const subjectChange = () => {
  getStandardPie()
}
/** 雷达图筛选开始*/
const scoresRadarType = ref(1)
const scoresTypeList = ref([
  {
    type: 1,
    title: '最高分',
  }, {
    type: 2,
    title: '中位数',
  }, {
    type: 3,
    title: '平均分',
  }])
const scoresRadarChange = () => {
  getStandardRadar()
}
/** 雷达图筛选结束*/
/** 获取标化雷达图开始*/
const standardRadarList = ref([])
const getStandardRadar = () => {
  studentStandardRadar({...standardForm.value, type: scoresRadarType.value, student_id:route.query.id}).then(res => {
    standardRadarList.value = res.data
  })
}
/** 获取标化雷达图结束*/
/** 趋势折线图数据开始*/
const lineChartTabsList = [
  {
    title: '年级排名',
    value: 1
  },
  {
    title: '年级排名',
    value: 2
  }
]
const rankingType = ref(1)
const rankingChange = (item)=>{
  rankingType.value = item.value
  getLineData()
}
const rankingData = ref([])
const getLineData = () => {
  rankingTrends({
    student_id: route.query.id,
    type: rankingType.value,
    interim: testType.value
  }).then(res=>{
    rankingData.value = res.data
  })
}
getLineData()
/** 趋势折线图数据结束*/

</script>

<template>
  <div class="content">
    <v-list class="header_box">
      <div class="head">
        <div class="head-arrow cursor-pointer" @click="goBack"><i class="ri-arrow-left-s-line"
                                                                  style="font-size: 50px;"></i></div>
        <div class="heads">
          <div class="head_title">
            详细信息-标准成绩
          </div>
        </div>
        <div class="ml-auto flex-box right-box">
          <div class="item flex-box">
            <div class="label">参考人数：</div>
            <div class="value">{{ studentDetail.classNum }}人</div>
          </div>
          <div class="item flex-box">
            <div class="label">班级平均分：</div>
            <div class="value">{{ studentDetail.classAvg }}分</div>
          </div>
          <div class="item flex-box">
            <div class="label">年级平均分：</div>
            <div class="value">{{ studentDetail.gradeAvg }}分</div>
          </div>
          <div class="item flex-box">
            <div class="label">班级内排名：</div>
            <div class="value">{{ studentDetail.classSeat }}名</div>
          </div>
          <div class="item flex-box">
            <div class="label">年级排名：</div>
            <div class="value">{{ studentDetail.gradeSeat }}名</div>
          </div>
        </div>
        <div class="w-200 mr-3 ml-3">
          <VSelect
            style="width: 200px;height: 38px;"
            v-model="standardForm.examcourse_id"
            :items="sessionList"
            @update:modelValue="changeSession"
            item-title="title"
            item-value="examcourse_id"
            placeholder="请选择所属场次"
            label="所属场次*"
            class="input-width-height"
          />
        </div>
      </div>
    </v-list>
    <VDivider/>
    <div class="main-bottom">
      <div class="student-box">
        <img class="avatar-box" :src="studentDetail?.phoneImg?studentDetail.phoneImg:'../../assets/avatar.png'" alt="">
        <div class="student-detail">
          <div class="name">{{ studentDetail?.real_name }}</div>
          <div class="bottom-detail">
            <div>
              性别：{{ studentDetail?.sex }}
            </div>
            <div>
              所属：{{ studentDetail?.gradeTitle }}{{ studentDetail?.classTitle }}
            </div>
            <div>
              出生：{{ studentDetail?.brith_time }}
            </div>
          </div>
        </div>
        <div class="right-disciplines">
          <div class="disciplines-item">
            <div class="disciplines-title">英语</div>
            <div class="score-box"><span class="num">{{ studentDetail?.englishScore || 0 }}</span>分</div>
          </div>
          <div class="disciplines-item">
            <div class="disciplines-title">数学</div>
            <div class="score-box"><span class="num">{{ studentDetail?.mathsScore || 0 }}</span>分</div>
          </div>
          <div class="disciplines-item">
            <div class="disciplines-title">语文</div>
            <div class="score-box"><span class="num">{{ studentDetail?.languageScore || 0 }}</span>分</div>
          </div>
          <div class="disciplines-item">
            <div class="disciplines-title">总分</div>
            <div class="score-box"><span class="num">{{ studentDetail?.totalScore || 0 }}</span>分</div>
          </div>
        </div>
      </div>
      <!--      展示总览-->
      <div class="text-display" v-if="studentDetail.stats">
        <div class="text-display-item">
          <div>
            <div class="title">
              英语排名
            </div>
            <div style="color:rgba(22, 177, 255, 1)">
              {{studentDetail.englishScoreSeat}}
            </div>
          </div>
          <div>
            <div class="title">
              年级英语最高分
            </div>
            <div>
              {{ studentDetail.stats.english?.max || 0 }}
            </div>
          </div>
          <div>
            <div class="title">
              英语平均分
            </div>
            <div>
              {{ studentDetail.stats.english?.avg || 0 }}
            </div>
          </div>
          <div>
            <div class="title">
              英语中位数
            </div>
            <div>
              {{ studentDetail.stats.english?.median || 0 }}
            </div>
          </div>

        </div>
        <div class=" text-display-item">
          <div>
            <div class="title">
              数学排名
            </div>
            <div style="color:rgba(86, 202, 0, 1)">
              {{studentDetail.mathsScoreSeat}}
            </div>
          </div>
          <div>
            <div class="title">
              年级数学最高分
            </div>
            <div>
              {{ studentDetail.stats.maths?.max || 0 }}
            </div>
          </div>
          <div>
            <div class="title">
              数学平均分
            </div>
            <div>
              {{ studentDetail.stats.maths?.avg || 0 }}
            </div>
          </div>
          <div>
            <div class="title">
              数学中位数
            </div>
            <div>
              {{ studentDetail.stats.maths?.median || 0 }}
            </div>
          </div>

        </div>
        <div class=" text-display-item">
          <div>
            <div class="title">
              语文排名
            </div>
            <div style="color:rgba(255, 180, 0, 1)">
              {{studentDetail.languageScoreSeat}}
            </div>
          </div>

          <div>
            <div class="title">
              年级语文最高分
            </div>
            <div>
              {{ studentDetail.stats.maths?.max || 0 }}
            </div>
          </div>
          <div>
            <div class="title">
              语文平均分
            </div>
            <div>
              {{ studentDetail.stats.maths?.avg || 0 }}
            </div>
          </div>
          <div>
            <div class="title">
              语文中位数
            </div>
            <div>
              {{ studentDetail.stats.maths?.median || 0 }}
            </div>
          </div>
        </div>
      </div>
      <!--      成绩折线图-->
      <div class="mt-5 class-bar-box">
        <div class="flex-box chart-line">
          <div class="title">排名趋势</div>
          <div class="flex-box tip-item" v-for="(item,index) in classGradesTipsList" :key="index">
            <div class="color-box" :style="{backgroundColor:item.color}"></div>
            <div class="name">
              {{ item.title }}
            </div>
          </div>
          <custom-tabs @change="rankingChange" style="margin-left: auto" :tabs="lineChartTabsList"/>
          <div>
            <el-select
              class="ml-6"
              v-model="testType"
              @change="testTypeChange"
              popper-class="mySelectStyle"
              style="width: 120px;"
              :teleported="false"
            >
              <el-option
                v-for="item in testTypeList"
                :key="item.title"
                :label="item.title"
                :value="item.title"
              />
            </el-select>

          </div>

        </div>
        <line-chart :data-list="rankingData"></line-chart>
      </div>
      <!--      雷达图 分数分布    -->
      <div class="mt-5 flex-box">
        <div class="radar-box box-shadow">
          <div class="flex-box chart-line">
            <div class="title">雷达图</div>
            <div class="ml-auto">
              <el-select
                class="ml-6"
                v-model="scoresRadarType"
                @change="scoresRadarChange"
                popper-class="mySelectStyle"
                style="width: 120px;"
                :teleported="false"
              >
                <el-option
                  v-for="item in scoresTypeList"
                  :key="item.type"
                  :label="item.title"
                  :value="item.type"
                />
              </el-select>

            </div>
          </div>
          <radar-chart v-if="standardRadarList.length!=0" height="430px" :data-list="standardRadarList"></radar-chart>
        </div>
        <div class="radar-box box-shadow" style="margin-left: 4%">
          <div class="flex-box chart-line ">
            <div>
              <div class="title">分数分布</div>
              <div class="tip">所在分布区间内人数占的比例</div>
            </div>
            <div class="ml-auto">
              <el-select
                class="ml-2"
                v-model="subject"
                @change="subjectChange"
                popper-class="mySelectStyle"
                style="width: 120px;"
                :teleported="false"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.type"
                  :label="item.title"
                  :value="item.type"
                />
              </el-select>
            </div>
          </div>
          <pie-chart :data-list="standardPieList" height="420px"></pie-chart>
        </div>
      </div>

    </div>
  </div>
</template>


<style scoped lang="scss">
@use "@configured-variables" as variables;

.content {
  background-color: rgba(var(--v-theme-surface));
}

.student-box {
  display: flex;
  align-items: center;
  background-color: rgba(var(--v-theme-surface));

  .avatar-box {
    width: 120px;
    height: 120px;
    border-radius: 6px;
    margin-right: 24px;
  }

  .student-detail {
    margin-right: 80px;

    .name {
      font-size: 24px;
      color: #433C50;
      margin-bottom: 16px;
    }

    .bottom-detail {
      color: rgba(140, 135, 152, 1);
      font-size: 16px;
      margin-bottom: 5px;
    }

  }

  .right-disciplines {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-around;

    .disciplines-item {
      .disciplines-title {
        font-size: 20px;
        color: rgba(46, 38, 61, 0.9);
      }

      .score-box {
        .num {
          font-size: 40px;
        }
      }
    }
  }
}

.header_box {
  padding: 0px;
  overflow: visible;
  display: flex;

  .head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 12px;
    padding-right: 20px;

    .head-arrow {
      margin-left: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
    }
  }

}

.head {
  inline-size: 100%;
  padding-block: 12px;

  .heads {
    display: flex;
    align-items: center;
    inline-size: calc(100% - 48px);
    margin-block: 0;
    margin-left: 20px;

    .head_title {
      //color: #423b50;
      font-feature-settings: "ss01" on, "ss04" on;
      font-size: 20px;
      font-style: normal;
      font-variant-numeric: lining-nums tabular-nums;
      font-weight: 500;
      line-height: 140%; /* 28px */
    }

    .search {
      display: flex;
      align-items: center;
      border-radius: 74px;
      inline-size: 291px;
      margin-inline-start: 40px;
      padding-block: 8px;
      padding-inline: 16px;
      background-color: variables.$vertical-nav-background-color;

    }
  }

  .right-box {
    .item {
      .label {
        width: 120px;
        text-align: right;
        color: #8C8798;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "PingFang SC";
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 160% */
      }

      .value {
        flex-shrink: 0;
        color: rgba(46, 38, 61, 0.9);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "PingFang SC";
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
      }
    }
  }
}

.text-display {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

  .text-display-item {
    margin-top: 10px;
    width: 32%;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
    padding: 20px;
    border-radius: 6px;

    .icon-box {
      width: 42px;
      height: 42px;
      padding: 8px;
      border-radius: 6px;
      background: rgba(218, 243, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(22, 177, 255, 1);
    }

    .title {
      font-family: PingFang SC;
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      margin-bottom: 10px;
    }

  }
}

.main-bottom {
  background-color: rgb(var(--v-theme-surface));
  padding: 32px 24px 30px;
}

.class-bar-box {
  box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
  padding: 20px;
  border-radius: 6px;
}

.radar-box {
  width: 48%;
  height: 500px;
}

.box-shadow {
  border-radius: 6px;
  box-shadow: 0px 4px 10px 0px rgb(var(--v-theme-box-shadow));
  padding: 24px;
}

.chart-line {
  height: 30px;

  .title {
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-right: 15px;
  }

  .tip {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: rgba(46, 38, 61, 0.55);
  }

  .tip-item {
    display: flex;
    align-items: center;
    margin-left: 30px;

    .color-box {
      width: 16px;
      height: 16px;
      border-radius: 1px;
      margin-right: 8px;
    }
  }
}
::v-deep(.el-select__wrapper),
::v-deep(.el-select-dropdown){
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-popper.is-light .el-popper__arrow::before) {
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-select__wrapper){
  background-color: rgb(var(--v-theme-surface));
}
::v-deep(.el-select-dropdown__item){
  color: rgb(140, 87, 255);
}
</style>
